<template>
    <div>
        <div class="auth-box">
            <div class="auth">
                <div class="auth-head flex flex-align-center">
                    <p class="flex-1">选择公司成员</p>
                    <img src="@/assets/img/common/close.png" alt="" @click="onClosefn">
                </div>
                <!-- 公司群组切换按钮 -->
                <div class="auth-menu-box flex flex-align-center">
                    <div class="name-box" :class="{active:is_active == 0}" @click="onChange(0)">同事</div>
                    <div class="name-box" :class="{active:is_active == 1}" @click="onChange(1)">部门</div>
                    <div class="name-box" :class="{active:is_active == 2}" @click="onChange(2)">群组</div>
                    <div class="search-box flex">
                        <input type="text" v-model="search" placeholder="搜索同事/部门/群组">
                        <div class="search-btn" @click="onSearchfn">
                            <img src="@/assets/img/search/searchbtn.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- 列表 -->
                <div class="list-box">
                   <Tree :data = "data" v-on:change="onTreeChange"/>
                </div>
                <!-- 已选择 -->
                <div class="user-box flex">
                    <div class="yixz flex-1" v-if="AuthUserList.length>0">
                        已选择：
                    </div>
                    <div class="item-box">
                        <div class="item" v-for="(item,index) in AuthUserList" :key="index" >
                            <p>{{item.name}}</p>
                            <span @click="delAuthUserList(item)">x</span>
                        </div>
                    </div>  
                </div>
                <!-- 按钮组 -->
                <div class="btn-group flex">
                    <div class="btn" @click="onnext">下一步</div>
                    <div class="btn" @click="onClosefn">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Tree from '../common/tree'
export default {
    components: {
        Tree
    },
    data () {
        return {
            is_active:0,
            list:[], // 列表
            data:[], // 当前显示列表
            search:'', // 用户列表搜索
        }
    },
    mounted () {
        this.getUserAndDeptAndGroupsList();
        this.resetAuthUserList();
    },
    computed: {
        AuthUserList(){
            return this.$store.getters.getAuthUserList
        }
    },

    watch: {

        // 到搜索关键字内容为空时，数据恢复为用户列表
        search(news){
            if(!news){
                this.is_active = 0; 
               this.data = this.list.user_list
            }
        }
    },

    methods: {
        // 关闭窗口
        onClosefn(){
            this.$emit('close');
        },

        // 下一步
        onnext(){
            if(this.AuthUserList.length){
                this.$emit('next');
            }else{
                this.$toast({
                    message:'请选择公司成员'
                })
            }
        },

        // 重置新增列表
        resetAuthUserList(){
            var root = [];
            this.$store.commit('setAuthUserList',root)
        },

        // 切换列表
        onChange(i){
            if(i == 0){
               this.is_active = 0; 
               this.data = this.list.user_list
            }else if(i == 1){
               this.is_active = 1; 
               this.data = this.list.dept_list
            }else{
               this.is_active = 2; 
               this.data = this.list.groups_list
            }
        },

        // 删除新添加授权用户列表
        delAuthUserList(item){
            var root = this.AuthUserList;
                var index = root.indexOf(item)
                if (index > -1) {
                        root.splice(index, 1);
                };
                this.$store.commit('setAuthUserList',root)
                this.data.forEach(e => {
                    if(e.id == item.id){
                        e.state = false;
                    }
                })
        },

        // 点击tree事件
        onTreeChange(e){
            var root = this.AuthUserList
            this.data.forEach(item => {
                if(item.id == e.id){
                    if(!item.state){
                         root.push(e);
                         this.$store.commit('setAuthUserList',root)
                    }
                    item.state = true
                }
            });
        },

        // 搜索
        async onSearchfn(){
            var params = {
                folder_id: this.$store.state.listData.id, //文件夹id
                keyword: this.search // 搜索关键字；
            }
            var {data} = await this.$https.post('sharedfile/searchCooperationMember',params);
            for(var i in data.list){
                data.list[i].state = false;
                data.list[i].child = '';
                data.list[i].permissions= "1";
                data.list[i].is_customize = false;
            }
            this.data = data.list;
             this.is_active = 3; 
        },

        // 共享文件夹：设置共享文件夹弹窗 用户/群组/部门列表
        async getUserAndDeptAndGroupsList(){
            var params = {
                folder_id: this.$store.state.listData.id, //文件夹id
            }
            var {data} = await this.$https.post('sharedfile/getUserAndDeptAndGroupsList',params);
            for(var i in data.list){
                data.list[i].forEach(ele => {
                    ele.state = false;
                    ele.child = '';
                    ele.permissions= "1";
                    ele.is_customize = false;
                    if(i == 'user_list'){
                        ele.type = 'user'
                    }else if(i == 'dept_list'){
                        ele.type = 'dept'
                    }else{
                         ele.type = 'groups'
                    }
                })
            }
            this.list = data.list;
            this.data = data.list.user_list;
        }
    },
    
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/filepanel/authbox.less);
</style>


